<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>姓名案例_methods实现</title>
    <!-- 引入Vue.js -->
    <script src="../js/vue.js"></script>
    <style>
      * {
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="root">
      姓:<input type="text" v-model="firstName" /><br />
      <!-- v-model 双向绑定 -->
      名:<input type="text" v-model="lastName" /><br />
      姓名 <span>{{fullName()}}</span>
      <!-- 模板语法 内可以使用 vm实例中的所有属性 -->
    </div>
  </body>
  <script>
    new Vue({
      el: "#root",
      data() { // 注意:当data发生了改变,模板一定会重新进行解析
        return {
          firstName: "张",
          lastName: "三",
        };
      },
      methods: {
        fullName() {
          console.log(this); // vm实例
          return `${this.firstName}-${this.lastName}`;
        },
      },
    });
  </script>
</html>
